PersonaĀ - Eugenia SĆ”nchez
DeclaraciĆ³n del Problema
Ā Eugenia es una profesora de primaria que necesita una plataforma de venta de pasteles en lĆnea porque quiere ahorrar tiempo y encontrar el pastel perfecto de manera eficiente y sin estrĆ©s
Mapa del recorrido del usuario
El mapeo del recorrido de usuario de Eugenia revelĆ³ lo Ćŗtil que serĆa para
los usuarios tener acceso a una web de Bakery shop en donde puedan comprar fƔcil y rƔpido
los usuarios tener acceso a una web de Bakery shop en donde puedan comprar fƔcil y rƔpido
Mapa del SitioĀ
Se buscĆ³ facilitar el acceso a los usuarios mediante un proceso de pensamiento enfocado en la priorizaciĆ³n de opciones clave. Se destacaron las categorĆas principales, como āHOMEā, āQUIĆNES SOMOSā, āCONTACTOā y āLOGIN/SIGNUPā, para guiar a los visitantes. AdemĆ”s, se diseƱaron flujos intuitivos y se proporcionĆ³ feedback visual para una experiencia fluida y satisfactoria.
Wireframes en papel
Tomarme el tiempo para redactar iteraciones de cada pantalla de la aplicaciĆ³n en papel asegurĆ³ que los elementos que llegaron a los wireframes digitales fueran adecuados para abordar los puntos dĆ©biles de los usuarios. Para la pantalla de inicio, prioricĆ© un proceso de pedido rĆ”pido y sencillo para ayudar a los usuarios a ahorrar tiempo.
Wireframes en papel - VariaciĆ³n del tamaƱo de pantallas
Durante el proceso de diseƱo, explorĆ© la variaciĆ³n de tamaƱo de pantallas para garantizar que nuestra aplicaciĆ³n sea adaptable y funcione en diferentes dispositivos. CreĆ© wireframes en papel para representar cĆ³mo se verĆan las interfaces en distintas resoluciones, desde telĆ©fonos mĆ³viles hasta computadoras de escritorio. Esto me permitiĆ³ visualizar cĆ³mo los elementos se distribuirĆan y cĆ³mo podrĆamos adaptar la disposiciĆ³n para ofrecer una experiencia coherente y eficiente en todas las pantallas.Ā Ā
Wireframes Digitales
A medida que avanzaba la fase de diseƱo inicial, me asegurĆ© de basar los diseƱos de pantalla en los comentarios y hallazgos de la investigaciĆ³n de los usuarios.
Wireframes Digitales - Variaciones de tamaƱos de pantalla
Mi objetivo era establecer dĆ³nde colocar cada componente en la interfaz.Ā
TrabajĆ© en la estructura general del sitio. Esto incluĆa organizar las pĆ”ginas, secciones y subsecciones de manera lĆ³gica para que los usuarios pudieran navegar sin problemas. CreĆ©Ā los flujos de usuario, visualicĆ©Ā la funcionalidad y simplifiquĆ© los detalles grĆ”ficos para enfocarme en la estructura. IterĆ© segĆŗn los comentarios y las pruebas. AjustĆ© los wireframes para mejorar la usabilidad.
TrabajĆ© en la estructura general del sitio. Esto incluĆa organizar las pĆ”ginas, secciones y subsecciones de manera lĆ³gica para que los usuarios pudieran navegar sin problemas. CreĆ©Ā los flujos de usuario, visualicĆ©Ā la funcionalidad y simplifiquĆ© los detalles grĆ”ficos para enfocarme en la estructura. IterĆ© segĆŗn los comentarios y las pruebas. AjustĆ© los wireframes para mejorar la usabilidad.
Prototipo de bajaĀ fidelidad
El flujo de usuario en las imĆ”genes representa el proceso de compra en lĆnea. Comienzan con la bĆŗsqueda de un producto, seguido de la selecciĆ³n, ingreso de informaciĆ³n y finalmente la confirmaciĆ³n del pedido. Los comentarios de los pares se centraron en mejorar la claridad y eficiencia del proceso. ImplementĆ© ajustes en el diseƱo para hacerlo mĆ”s intuitivo y agreguĆ© informaciĆ³n adicional Ā necesaria para guiar al usuario a travĆ©s de cada paso con facilidad.
Prototipos de Alta Fidelidad
Como diseƱadora UX, optimicĆ© la disposiciĆ³n de los elementos en la pĆ”gina de mĆ©todos de pago. SimplifiquĆ© el flujo de usuario para que los clientes pudieran completar sus compras de manera mĆ”s rĆ”pida y sencilla. AdemĆ”s, agreguĆ© opciones de pago populares. Los resultados fueron notables: disminuciĆ³n del abandono del carrito y mayor satisfacciĆ³n de los usuarios
